<template>
<div class="table">
        <div class="divSearch">
            <!--搜索框-->
            <Row>
                <!--根据需求删除不不要查询条件-->
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">地区:</label>
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option :value="userinfo.AreaCode" v-show="isProvince">全部</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">年份:</label>
                    <Select v-model="searchModel.FillInYear"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictText">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">种类:</label>
                    <Select v-model="searchModel.ItemCode"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option value="">全部</Option>
                        <Option value="1">合计</Option>
                        <Option :value="item.ItemCode" v-for="item in ItemList" :key="item.ItemCode">{{item.ItemName}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-export" type="primary" @click="getExcelData()" class="searchButton">导出</Button>
                   
                </Col>
                <Col >
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="iconTitle">列表</span><Icon type="ios-paper" size="16"></Icon></Radio>
                        <Radio label="barShow" title="饼图"><span class="iconTitle">柱状图</span><Icon type="ios-pie" size="16"></Icon></Radio>   
                        <Radio label="mapShow" title="地图"><span class="iconTitle">地图</span><Icon type="android-map" size="16"></Icon></Radio>                                                                               
                    </RadioGroup>    
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table  class="ContentTable">
                    <caption>
                        <div>
                            <span class="tableNum">{{searchModel.FillInYear}}(四){{CurrentAreaName}}主要蔬菜播种面积、产量年度调查表(全面统计)</span>
                            <span class="tip">单位：亩、千克</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th width="72" rowspan="2" v-if="searchModel.ItemCode==''">种类</th>
                            <th width="72" rowspan="2" v-else>地区</th>
                            <th rowspan="2">全年蔬菜累计播种面积合计</th>
                            <th rowspan="2">全年蔬菜总产量</th>
                            <th rowspan="2">平均单产</th>
                            <th colspan="12">其中</th>
                            <!-- <th v-show="isProvince" rowspan="2" width="100px">操作</th> -->
                        </tr>
                        <tr>
                            <th>全年露地蔬菜累计播种面积</th>
                            <th>全年露地蔬菜产量</th>
                            <th>露地单产</th>
                            <th>全年小棚蔬菜累计播种面积</th>
                            <th>全年小棚蔬菜产量</th>
                            <th>小棚单产</th>
                            <th>全年大中棚蔬菜累计播种面积</th>
                            <th>全年大中棚蔬菜产量</th>
                            <th>大中棚单产</th>
                            <th>全年温室蔬菜累计播种面积</th>
                            <th>全年温室蔬菜产量</th>
                            <th>温室单产</th>
                        </tr>
                    </thead>
                <tbody>
                    <tr v-for="(item,index)  in datas"  :key="item.Veg_Type"  :class="{'tdColor':index%2!=0}">
                        <td width="72" v-if="searchModel.ItemCode==''">{{item.Veg_Type}}</td>
                        <td width="72" v-else>{{item.AreaName}}</td>
                        <td>{{Math.round((getZero(item.LD_Area)+getZero(item.XP_Area)+getZero(item.DZP_Area)+getZero(item.WS_Area))*100)/100|formatCurrency}}</td>
                        <td>{{Math.round((getZero(item.LD_Product)+getZero(item.XP_Product)+getZero(item.DZP_Product)+getZero(item.WS_Product))*100)/100|formatCurrency}}</td>
                        <td>{{getDivided(getZero(item.LD_Product)+getZero(item.XP_Product)+getZero(item.DZP_Product)+getZero(item.WS_Product),getZero(item.LD_Area)+getZero(item.XP_Area)+getZero(item.DZP_Area)+getZero(item.WS_Area))}}</td>
                        <td>{{item.LD_Area|formatCurrency}}</td>
                        <td>{{item.LD_Product|formatCurrency}}</td>
                        <td>{{getDivided(getZero(item.LD_Product),getZero(item.LD_Product))}}</td>
                        <td>{{item.XP_Area|formatCurrency}}</td>
                        <td>{{item.XP_Product|formatCurrency}}</td>
                        <td>{{getDivided(getZero(item.XP_Product),getZero(item.XP_Area))}}</td>
                        <td>{{item.DZP_Area|formatCurrency}}</td>
                        <td>{{item.DZP_Product|formatCurrency}}</td>
                        <td>{{getDivided(getZero(item.DZP_Product),getZero(item.DZP_Area))}}</td>
                        <td>{{item.WS_Area|formatCurrency}}</td>
                        <td>{{item.WS_Product|formatCurrency}}</td>
                        <td>{{getDivided(getZero(item.WS_Product),getZero(item.WS_Area))}}</td>
                        <!-- <td v-show="isProvince" width="100px">
                            <Button  size="small" type="primary"  @click="getDetail(item.AreaCode)">详情</Button>
                            <Button  size="small" type="primary" @click="getExcelData(item.AreaCode)">导出</Button>
                        </td> -->
                    </tr>
                    <tr v-if="datas.length==0"><td colspan="6">暂无数据</td></tr>
                </tbody>
                </table>
            </Col>
        </Row>
        <Row v-show="barShow&&searchModel.ItemCode!=''">
            <!--饼图-->
            <div id="divBar" style="border:1px solid #D7DDE4;">暂无数据</div>
        </Row>
        <Row  v-show="mapShow&&searchModel.ItemCode!=''">
            <!--地图展示-->
            <div id="divMap"  style="border:1px solid #D7DDE4;">暂无数据</div>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("VegUserInfo").AreaCode),
            Option:'1',
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("VegUserInfo"),//获取当前用户信息
            ItemList:[],
            CheckButton:'listShow',
            datas:[],//列表数据
            detailDatas:[],//详情
            isProvince:false,//是否为省级账号(操作栏目显示)
            detailView:false,//modal显示开关
            //柱状图数据
            AreaData:[],
            LD_AreaData:[],
            LD_ProductData:[],
            XP_AreaData:[],
            XP_ProductData:[],
            DZP_AreaData:[],
            DZP_ProductData:[],
            WS_AreaData:[],
            WS_ProductData:[],
            barAreaList:[],
            barProductList:[],
             //地图数据
            mapAreaList:[],
            mapProductList:[],
            echartsItemArea:['全年露地蔬菜累计播种面积','全年小棚蔬菜累计播种面积','全年大中棚蔬菜累计播种面积','全年温室蔬菜累计播种面积'],
            echartsItemProduct:['全年露地蔬菜产量','全年小棚蔬菜产量','全年大中棚蔬菜产量','全年温室蔬菜产量'],
            mapType:'',
            MapLD_AreaData:[],
            MapLD_ProductData:[],
            MapXP_AreaData:[],
            MapXP_ProductData:[],
            MapDZP_AreaData:[],
            MapDZP_ProductData:[],
            MapWS_AreaData:[],
            MapWS_ProductData:[],
            GeoData:'',
            //地图数据完
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'VegProSurveyYear',
                FillInYear: '',
                TimesType: '',
                TimesCycle:'',
                AreaCode: this.GetlocaStorage("VegUserInfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                Opinion: '',
                ItemCode:'',
                ExportType:''//导出类型(地区和种类)
            },
            listShow:false,//列表显示控制器
            barShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
        }  
    },
    //方法
    methods: {
        //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
                this.mapShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示饼图
                this.mapShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.barShow=false;//显示地图
                this.mapShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
                 this.mapShow=false;
            }
        },
        getStatsList(){
            var self=this;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;
            } else {
                self.searchModel.FillInYear = self.CurrentYear + '年';//填报年度-----数据字典值
            }
            //判断当前用户是否为省级账号
            if(self.userinfo.AreaCode=="530000000000")
            {
                self.isProvince=true;
                self.mapType=self.searchModel.AreaCode;
            }
            else{
                self.mapType=self.userinfo.AreaCode;
            }
            self.AreaData=[],
            self.LD_AreaData=[],
            self.LD_ProductData=[],
            self.XP_AreaData=[],
            self.XP_ProductData=[],
            self.DZP_AreaData=[],
            self.DZP_ProductData=[],
            self.WS_AreaData=[],
            self.WS_ProductData=[],
            self.barAreaList=[],
            self.barProductList=[],
             //地图数据
            self.mapAreaList=[],
            self.mapProductList=[],
            self.MapLD_AreaData=[],
            self.MapLD_ProductData=[],
            self.MapXP_AreaData=[],
            self.MapXP_ProductData=[],
            self.MapDZP_AreaData=[],
            self.MapDZP_ProductData=[],
            self.MapWS_AreaData=[],
            self.MapWS_ProductData=[],
            self.GeoData=self.GetGeoData(self.mapType);
            if(self.searchModel.ItemCode==""||self.searchModel.ItemCode==null){
                self.$http.post('VegProSurvey/PostStats', self.searchModel).then(function (res) {
                    if(res.data.status===1)
                    {
                        self.datas= res.data.model;
                    }
                });   
            }
            else{
                self.$http.post('VegProSurvey/PostStats', self.searchModel).then(function (res) {
                    if(res.data.status===1)
                    {
                        self.datas= res.data.model;
                        for(var i=1;i<res.data.model.length;i++)
                       {   
                            self.AreaData.push(res.data.model[i].AreaName);
                            self.LD_AreaData.push(res.data.model[i].LD_Area);
                            self.XP_AreaData.push(res.data.model[i].XP_Area);
                            self.DZP_AreaData.push(res.data.model[i].DZP_Area);
                            self.WS_AreaData.push(res.data.model[i].WS_Area);

                            self.LD_ProductData.push(res.data.model[i].LD_Product);
                            self.XP_ProductData.push(res.data.model[i].XP_Product);
                            self.DZP_ProductData.push(res.data.model[i].DZP_Product);
                            self.WS_ProductData.push(res.data.model[i].WS_Product);

                             //地图数据
                            self.MapLD_AreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LD_Area});
                            self.MapXP_AreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].XP_Area});
                            self.MapDZP_AreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].DZP_Area});
                            self.MapWS_AreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].WS_Area});

                            self.MapLD_ProductData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LD_Product});
                            self.MapXP_ProductData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].XP_Product});
                            self.MapDZP_ProductData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].DZP_Product});
                            self.MapWS_ProductData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].WS_Product});
                       } 
                        self.barAreaList.push(self.LD_AreaData,self.XP_AreaData,self.DZP_AreaData,self.WS_AreaData),
                        self.barProductList.push(self.LD_ProductData,self.XP_ProductData,self.DZP_ProductData,self.WS_ProductData),
                        //地图数据
                        self.mapAreaList.push(self.MapLD_AreaData,self.MapXP_AreaData,self.MapDZP_AreaData,self.MapWS_AreaData),
                        self.mapProductList.push(self.MapLD_ProductData,self.MapXP_ProductData,self.MapDZP_ProductData,self.MapWS_ProductData),
                       self.showEcharts();
                    }
                }); 
            }
        },
        showEcharts(){//显示柱状图
            //显示柱状图
            var self=this;
            var containerBar=document.getElementById('divBar');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBar.style.height = (window.innerHeight-260)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBar = myEcharts.init(containerBar, 'shine');
            var BarName=self.searchModel.FillInYear+'(四)'+self.CurrentAreaName+'主要蔬菜播种面积、产量年度调查柱状统计图(全面统计)';
            var optionBar = self.GetBarOption(BarName,self.AreaData,self.echartsItemArea,self.barAreaList);
            myBar.setOption(optionBar);
            //******************显示地图
            var self=this;
            var containerMap=document.getElementById('divMap');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerMap.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMap.style.height = (window.innerHeight-260)+'px';
            };
            //设置容器高宽
            resizeContainerMap();

            var myMap = myEcharts.init(containerMap, 'shine');
            var MapName=self.searchModel.FillInYear+'(四)'+self.CurrentAreaName+'主要蔬菜播种面积、产量年度调查统计地区分布图(全面统计)';
            var optionMap = self.GetMapOption(MapName,self.GeoData,self.mapType,self.echartsItemArea,self.mapAreaList);
            myMap.setOption(optionMap);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myMap.resize();
                myBar.resize();
            };
        },
        getDetail(AreaCode){//获取详情  
            var self=this;
            self.detailView=true;   
            self.searchModel.AreaCode=AreaCode;
            self.$http.post('VegProSurvey/PostDetailStats', self.searchModel).then(function (res) {
                    if(res.data.status===1)
                    {
                        
                        self.CurrentAreaName=res.data.model[0].AreaName;
                        self.detailDatas= res.data.model;
                    }
                });
        },
        getExcelData(){
            window.open(this.$http.defaults.baseURL + "VegProSurvey/GetStatsExcelData?AreaCode="+this.searchModel.AreaCode+"&&FillInYear="+this.searchModel.FillInYear+"&&Status="+this.searchModel.Status+"&&ReportCode="+this.searchModel.ReportCode+"&&TimesCycle="+this.searchModel.TimesCycle+"&&ItemCode="+this.searchModel.ItemCode);
        },
        getSearchItemList() {//获取种类列表
            var self=this;
            this.$http.get('SetList/GetSearchList', { params: { tableCode: 'VegProSurvey' } }).then(function (res) {
                self.ItemList = res.data.model;
            });
        },
    },
    //创建Vue页面方法
    created: function () {
        this.getSearchItemList();
        this.changeButton("listShow");
        this.getStatsList();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
